<template>
  <el-backtop :bottom="50">
    <div class="back-top flex-row-center">
      <el-icon class="icon"><Top /></el-icon>
    </div>
  </el-backtop>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
  .back-top{
    height: 100%;
    width: 100%;
    background-color: var(--el-bg-color-overlay);
    box-shadow: var(--el-box-shadow-lighter);
    color: #1989fa;
    caret-color: transparent;
    &:hover{
      .icon{
        animation: 0.5s ease-in-out col-float alternate infinite;
      }

    }
    .icon{

    }
  }

  @keyframes col-float {
    50%{
      transform: translateY(-25%);
    }
    100%{
      transform: translateY(0%);
    }
  }
</style>